<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 是否启动webapp功能，会删除默认的苹果工具栏和菜单栏。 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 这个主要是根据实际的页面设计的主体色为搭配来进行设置。 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 忽略页面中的数字识别为电话号码,email识别 -->
    <meta name="format-detection" content="telephone=no, email=no" />
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <title>我的消息</title>
    
    <link rel="stylesheet" href="css/bootstrap.min.css" >
    <link rel="stylesheet" href="css/mui.min(1).css">

    <style>
        body{
            background-color: #ffffff;
        }
        .header .right{
            margin-top: 10px;
             margin-left: -4px;
        }
        li{
            margin-top:10px;
            border:1px solid #F3F5F4;
            height: 90px;
            border-radius: 10px;
            width: 375px;
            margin-left: 20px;
            box-shadow: 5px 5px 5px 2px #F3F4F4;
        }
    </style>

</head>
<body>
    <div class="mui-content" style="background-color: white;margin-top:50px;">
        <div id="slider" class="mui-slider">
     <!--头部开始-->
        <nav class="container-fluid header navbar-fixed-top">
            <div class="row">
                <a href="javascript:history.go(-1)">
                    <div class="col-xs-1 text-right right">
                        <svg t="1588050361008" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5675" width="26" height="33"><path d="M771.072 105.472 715.776 51.2 242.688 512 715.776 972.8 771.072 918.528 354.304 512Z" p-id="5676" fill="#2c2c2c"></path></svg>
                    </div>
                </a>
                <div class="col-xs-9 text-center center" style="margin-top:6px;">
                    <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="width: 120px;margin:0 auto;">
                        <a class="mui-control-item" href="#item1mobile" style="color: #B0B0B0;font-size: 16px;">消息</a>
                        <a class="mui-control-item" href="#item1mobile" style="color: #B0B0B0;font-size: 16px;">私信</a>
                
                    </div>
                    <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3" style="margin-left: 85px;width:40px;color:red;"></div>
                </div>
              
                <div class="col-xs-2 text-left left" >
                        <p style="font-size: 17px;color: black;font-family:'微软雅黑';margin-top: 15px;">忽略</p>
                </div>
            </div>
        </nav>
        <div class="mui-slider-group">
                <div id="item1mobile" class="mui-slider-item mui-control-content mui-active" style="height: 650px;">
                    <div id="scroll1" class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                                <ul class="mui-table-view">
                                    <a href="dojiaofeione?userId=${user.userId}">
                                    <li class="mui-table-view-cell">
                                       
                                        <div class="col-xs-2 text-right right" style="margin-left:-7px;">
                                        <img src="img/icon/缴费.png" style="width:37px;margin-top: 15px;">
                                        </div>
                                        <div class="col-xs-9 text-center center" >
                                          <p style="font-family: '微软雅黑';font-size: 20px;color:black;margin-top: 15px;margin-left: -60px;">物业缴费账单信息</p>
                                          <p style="font-size: 15px;color: #525252;margin-top:7px;margin-left: -10px;">及时推送您的月结物业账单信息</p>
                                        </div>
                                        <div class="col-xs-1 text-left left" style="margin-top: 25px;">
                                                <svg t="1588073501583" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1899" width="24" height="24"><path d="M416.47025994 292.41032646c5.79288654 0 11.09485049 2.40552069 15.85679958 7.11837751 65.09633514 64.75268934 130.19267031 129.55447094 195.28900546 194.4053448l3.24008908 3.24008908c4.51648781 4.51648781 7.06928526 11.29121953 6.97110075 18.65505833-0.04909226 7.02019301-2.60188973 13.4512789-6.92200848 17.62412091-65.93090355 63.62356739-131.76362258 127.34531931-197.64543388 190.96888668-4.7619491 4.61467231-10.11300532 6.97110075-15.90589185 6.97110075-9.86754401 0-19.98054932-7.31474656-24.0552068-17.3786596-2.16005939-5.40014845-4.32011878-15.95498411 5.89107104-25.82252812l69.41645393-67.10911777c35.4937031-34.31548889 70.98740621-68.58188554 106.43201705-102.89737443l3.28918134-3.19099681L506.11272448 443.07446866c-35.93553342-35.78825665-71.87106685-71.52742105-107.80660029-107.26658546-7.36383882-7.36383882-9.42571369-16.88773702-5.54742525-26.21526618 4.17284199-10.11300532 13.94220149-17.18229057 23.71156101-17.18229056z m1e-8 0" fill="#C9C9C9" p-id="1900"></path></svg>
                                        </div>                                         
                                    </li>
                                    </a>
                                    <a href="seleappOne?userId=${user.userId}">
                                        <li class="mui-table-view-cell">  
                                           <div class="col-xs-2 text-right right" style="margin-left:-7px;">
                                                <img src="img/icon/服务.png" style="width:37px;margin-top: 15px;">
                                            </div>
                                            <div class="col-xs-9 text-center center" >
                                                <p style="font-family: '微软雅黑';font-size: 20px;color:black;margin-top: 15px;margin-left: -140px;">服务消息</p>
                                                <p style="font-size: 15px;color: #525252;margin-top:7px;margin-left: -53px;">服务工单最新的进度消息</p>
                                            </div>
                                            <div class="col-xs-1 text-left left" style="margin-top: 25px;">
                                                <svg t="1588073501583" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1899" width="24" height="24"><path d="M416.47025994 292.41032646c5.79288654 0 11.09485049 2.40552069 15.85679958 7.11837751 65.09633514 64.75268934 130.19267031 129.55447094 195.28900546 194.4053448l3.24008908 3.24008908c4.51648781 4.51648781 7.06928526 11.29121953 6.97110075 18.65505833-0.04909226 7.02019301-2.60188973 13.4512789-6.92200848 17.62412091-65.93090355 63.62356739-131.76362258 127.34531931-197.64543388 190.96888668-4.7619491 4.61467231-10.11300532 6.97110075-15.90589185 6.97110075-9.86754401 0-19.98054932-7.31474656-24.0552068-17.3786596-2.16005939-5.40014845-4.32011878-15.95498411 5.89107104-25.82252812l69.41645393-67.10911777c35.4937031-34.31548889 70.98740621-68.58188554 106.43201705-102.89737443l3.28918134-3.19099681L506.11272448 443.07446866c-35.93553342-35.78825665-71.87106685-71.52742105-107.80660029-107.26658546-7.36383882-7.36383882-9.42571369-16.88773702-5.54742525-26.21526618 4.17284199-10.11300532 13.94220149-17.18229057 23.71156101-17.18229056z m1e-8 0" fill="#C9C9C9" p-id="1900"></path></svg>
                                            </div>
                                        </li>
                                    </a>
                                    <a href="">
                                        <li class="mui-table-view-cell">
                                            <div class="col-xs-2 text-right right" style="margin-left:-7px;">
                                                <img src="img/icon/订单.png" style="width:37px;margin-top: 15px;">
                                            </div>
                                            <div class="col-xs-9 text-center center" >
                                                <p style="font-family: '微软雅黑';font-size: 20px;color:black;margin-top: 15px;margin-left: -140px;">订单消息</p>
                                                <p style="font-size: 15px;color: #525252;margin-top:7px;margin-left: -23px;">消费购买的所有订单动态消息</p>
                                            </div>
                                            <div class="col-xs-1 text-left left" style="margin-top: 25px;">
                                                <svg t="1588073501583" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1899" width="24" height="24"><path d="M416.47025994 292.41032646c5.79288654 0 11.09485049 2.40552069 15.85679958 7.11837751 65.09633514 64.75268934 130.19267031 129.55447094 195.28900546 194.4053448l3.24008908 3.24008908c4.51648781 4.51648781 7.06928526 11.29121953 6.97110075 18.65505833-0.04909226 7.02019301-2.60188973 13.4512789-6.92200848 17.62412091-65.93090355 63.62356739-131.76362258 127.34531931-197.64543388 190.96888668-4.7619491 4.61467231-10.11300532 6.97110075-15.90589185 6.97110075-9.86754401 0-19.98054932-7.31474656-24.0552068-17.3786596-2.16005939-5.40014845-4.32011878-15.95498411 5.89107104-25.82252812l69.41645393-67.10911777c35.4937031-34.31548889 70.98740621-68.58188554 106.43201705-102.89737443l3.28918134-3.19099681L506.11272448 443.07446866c-35.93553342-35.78825665-71.87106685-71.52742105-107.80660029-107.26658546-7.36383882-7.36383882-9.42571369-16.88773702-5.54742525-26.21526618 4.17284199-10.11300532 13.94220149-17.18229057 23.71156101-17.18229056z m1e-8 0" fill="#C9C9C9" p-id="1900"></path></svg>
                                            </div> 
                                        </li>
                                    </a>
                                    <a href="active.html">
                                        <li class="mui-table-view-cell">
                                           <div class="col-xs-2 text-right right" style="margin-left:-7px;">
                                                <img src="img/icon/活动.png" style="width:37px;margin-top: 15px;">
                                            </div>
                                            <div class="col-xs-9 text-center center" >
                                                <p style="font-family: '微软雅黑';font-size: 20px;color:black;margin-top: 15px;margin-left: -140px;">活动推广</p>
                                                <p style="font-size: 15px;color: #525252;margin-top:7px;">邻里邦最新活动优惠信息速来查看</p>
                                            </div>
                                            <div class="col-xs-1 text-left left" style="margin-top: 25px;">
                                                <svg t="1588073501583" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1899" width="24" height="24"><path d="M416.47025994 292.41032646c5.79288654 0 11.09485049 2.40552069 15.85679958 7.11837751 65.09633514 64.75268934 130.19267031 129.55447094 195.28900546 194.4053448l3.24008908 3.24008908c4.51648781 4.51648781 7.06928526 11.29121953 6.97110075 18.65505833-0.04909226 7.02019301-2.60188973 13.4512789-6.92200848 17.62412091-65.93090355 63.62356739-131.76362258 127.34531931-197.64543388 190.96888668-4.7619491 4.61467231-10.11300532 6.97110075-15.90589185 6.97110075-9.86754401 0-19.98054932-7.31474656-24.0552068-17.3786596-2.16005939-5.40014845-4.32011878-15.95498411 5.89107104-25.82252812l69.41645393-67.10911777c35.4937031-34.31548889 70.98740621-68.58188554 106.43201705-102.89737443l3.28918134-3.19099681L506.11272448 443.07446866c-35.93553342-35.78825665-71.87106685-71.52742105-107.80660029-107.26658546-7.36383882-7.36383882-9.42571369-16.88773702-5.54742525-26.21526618 4.17284199-10.11300532 13.94220149-17.18229057 23.71156101-17.18229056z m1e-8 0" fill="#C9C9C9" p-id="1900"></path></svg>
                                            </div> 
                                        </li>
                                    </a>
                                    <a href="">
                                        <li class="mui-table-view-cell">
                                           <div class="col-xs-2 text-right right" style="margin-left:-7px;">
                                                <img src="img/icon/官方.png" style="width:37px;margin-top: 15px;">
                                            </div>
                                            <div class="col-xs-9 text-center center" >
                                                <p style="font-family: '微软雅黑';font-size: 20px;color:black;margin-top: 15px;margin-left: -140px;">官方公告</p>
                                                <p style="font-size: 15px;color: #525252;margin-top:7px;margin-left: -52px;">邻里邦官方最新公告信息</p>
                                            </div>
                                            <div class="col-xs-1 text-left left" style="margin-top: 25px;">
                                                <svg t="1588073501583" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1899" width="24" height="24"><path d="M416.47025994 292.41032646c5.79288654 0 11.09485049 2.40552069 15.85679958 7.11837751 65.09633514 64.75268934 130.19267031 129.55447094 195.28900546 194.4053448l3.24008908 3.24008908c4.51648781 4.51648781 7.06928526 11.29121953 6.97110075 18.65505833-0.04909226 7.02019301-2.60188973 13.4512789-6.92200848 17.62412091-65.93090355 63.62356739-131.76362258 127.34531931-197.64543388 190.96888668-4.7619491 4.61467231-10.11300532 6.97110075-15.90589185 6.97110075-9.86754401 0-19.98054932-7.31474656-24.0552068-17.3786596-2.16005939-5.40014845-4.32011878-15.95498411 5.89107104-25.82252812l69.41645393-67.10911777c35.4937031-34.31548889 70.98740621-68.58188554 106.43201705-102.89737443l3.28918134-3.19099681L506.11272448 443.07446866c-35.93553342-35.78825665-71.87106685-71.52742105-107.80660029-107.26658546-7.36383882-7.36383882-9.42571369-16.88773702-5.54742525-26.21526618 4.17284199-10.11300532 13.94220149-17.18229057 23.71156101-17.18229056z m1e-8 0" fill="#C9C9C9" p-id="1900"></path></svg>
                                            </div> 
                                        </li>
                                    </a>
                                    <a href="">
                                        <li class="mui-table-view-cell">
                                            <div class="col-xs-2 text-right right" style="margin-left:-7px;">
                                                <img src="img/icon/智能.png" style="width:37px;margin-top: 15px;">
                                            </div>
                                            <div class="col-xs-9 text-center center" >
                                                <p style="font-family: '微软雅黑';font-size: 20px;color:black;margin-top: 15px;margin-left: -140px;">智能门禁</p>
                                                <p style="font-size: 15px;color: #525252;margin-top:7px;margin-left: -98px;">智能门禁相关信息</p>
                                            </div>
                                            <div class="col-xs-1 text-left left" style="margin-top: 25px;">
                                                <svg t="1588073501583" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1899" width="24" height="24"><path d="M416.47025994 292.41032646c5.79288654 0 11.09485049 2.40552069 15.85679958 7.11837751 65.09633514 64.75268934 130.19267031 129.55447094 195.28900546 194.4053448l3.24008908 3.24008908c4.51648781 4.51648781 7.06928526 11.29121953 6.97110075 18.65505833-0.04909226 7.02019301-2.60188973 13.4512789-6.92200848 17.62412091-65.93090355 63.62356739-131.76362258 127.34531931-197.64543388 190.96888668-4.7619491 4.61467231-10.11300532 6.97110075-15.90589185 6.97110075-9.86754401 0-19.98054932-7.31474656-24.0552068-17.3786596-2.16005939-5.40014845-4.32011878-15.95498411 5.89107104-25.82252812l69.41645393-67.10911777c35.4937031-34.31548889 70.98740621-68.58188554 106.43201705-102.89737443l3.28918134-3.19099681L506.11272448 443.07446866c-35.93553342-35.78825665-71.87106685-71.52742105-107.80660029-107.26658546-7.36383882-7.36383882-9.42571369-16.88773702-5.54742525-26.21526618 4.17284199-10.11300532 13.94220149-17.18229057 23.71156101-17.18229056z m1e-8 0" fill="#C9C9C9" p-id="1900"></path></svg>
                                            </div> 
                                        </li>
                                    </a>
                                    </ul>  
                        </div>
                    </div>
                </div>
                <div id="item2mobile" class="mui-slider-item mui-control-content"  style="height:550px ;background-color: #F7F8FA;">
                    <div id="scroll2" class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                                
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
     
</body>
</html>
<script src="js/mui.min.js"></script>